<template>
  <div class="login">
    <a-form
      :form="form"
      class="login-form"
      @submit.prevent="handleSubmit"
    >
      <a-form-item>
        <p class="login-logo">
          <svg class="login-logo-svg">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#panda"></use>
          </svg>
        </p>
      </a-form-item>
      <a-form-item>
        <a-input
          v-decorator="[
          'userName',
          { rules: [{ required: true, message: 'Please input your username!' }] }
        ]"
          placeholder="Username"
        >
          <a-icon
            slot="prefix"
            type="user"
            style="color: rgba(0,0,0,.25)"
          />
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input
          v-decorator="[
          'password',
          { rules: [{ required: true, message: 'Please input your Password!' }] }
        ]"
          type="password"
          placeholder="Password"
        >
          <a-icon
            slot="prefix"
            type="lock"
            style="color: rgba(0,0,0,.25)"
          />
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-button
          type="primary"
          html-type="submit"
          block
          class="login-form-button"
          :loading="isLogin"
        >
          {{ $t('layout.login') }}
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator'
  import { setToken } from '@/common/utils'
  import { auth } from '@/common/api'

  @Component
  export default class Login extends Vue{
    form: any
    isLogin: boolean = false

    handleSubmit(e: Event) {
      this.form.validateFields(
        async (err: any, values: object): Promise<any> => {
          if (!err) {
            console.log(values)
            this.isLogin = true
            /**HTTP请求示例 */
            auth.login({ a: 54674567 })
              .then(res => {
                setToken('dsafsdfsdfdsdsfds')
                this.$router.replace({ name: 'home' })
              })
              .catch(err => {
                console.error(err)
              })
              .finally(() => {
                console.info('the end')
                this.isLogin = false
              })
          }
        }
      )
    }

    beforeMount() {
      this.form = this.$form.createForm(this)
    }

    mounted() {
      
    }
  }
</script>

<style lang="scss">
  @import "../assets/style/mixin";

  .login {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url("../assets/bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    &-logo {
      @include flex-center;
      margin-bottom: 0;
      i {
        font-size: 60px;
      }
      &-svg {
        @include width-height(80px, 80px);
      }
    }
    &-form {
      width: 320px;
      border: 1px solid #ececec;
      padding: 24px 15px 0 15px;
      border-radius: 2px;
      box-shadow: 0 0 2px 0 rgba(0,0,0,.1);
      background-color: #ffffff;
    }
  }
</style>
